<template>
	<view class="my-content">
		<view class="feedback mb-20" v-for="feedback in feedbackList" :key="feedback.id">
			<text class="feed-title">标题：{{ feedback.title }}</text>
			<div class="mt-20 mb-20 fz26 text-gray-600">{{ feedback.content }}</div>
			<view class="feed-list">
				<view class="feed-img" v-for="(image, index) in feedback.images.split(',')" :key="index">
					<image :src="image" mode="widthFix"></image>
				</view>
			</view>
			<text class="feed-time">反馈时间：{{ feedback.create_at }}</text>
			<view class="back-con" style="display: block;" v-if="feedback.reply">
				<text class="red">反馈回复：</text>
				<rich-text v-html="feedback.reply" style="font-size: 14px;color: #999;"></rich-text>
			</view>
			<view class="feed-list" v-if="feedback.reply_images">
				<view class="feed-img" v-for="(image, index) in feedback.reply_images.split(',')" :key="index">
					<image :src="image" mode="widthFix"></image>
				</view>
			</view>
			<text class="feed-time" v-if="feedback.reply_time">回复时间：{{ feedback.reply_time }}</text>
		</view>
		<view class="no-data" v-if="feedbackList.length == 0">暂无数据</view>


		<view class="feed-btn" @click="gotoPage">
			<image src="../../static/my/edit.png" mode="widthFix"></image>
			<text>填写反馈</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			feedbackList: []
		}
	},
	methods: {
		gotoPage() {
			uni.navigateTo({
				url: '/pages/my/addFeed'
			})
		},
		async getFeedbackList() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const res = await this.http("post", "/api/user/feedback_list");
			this.feedbackList = res.data;
			uni.hideLoading();
		}
	},
	onShow() {
		this.getFeedbackList();
	}
}
</script >
</script>

<style lang="less" scoped>
.my-content {
	width: 100%;
	padding: 30upx;
	padding-bottom: 200upx;
	/* Increase padding to the bottom */
	box-sizing: border-box;

	.feedback {
		width: 100%;
		border-radius: 16upx;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
		padding: 20upx;
		box-sizing: border-box;

		.feed-title {
			font-size: 36upx;
			color: #000;
			font-weight: bold;
			display: block;
		}

		text {
			font-size: 32upx;
			color: #A6A6A6;
			display: block;
			margin-bottom: 10upx;
		}

		.feed-list {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;

			.feed-img {
				width: 80upx;
				height: 80upx;
				border-radius: 8upx;
				overflow: hidden;
				margin-right: 20upx;

				image {
					width: 100%;
					height: auto;
				}
			}
		}

		.feed-time {
			font-size: 24upx;
			color: #A6A6A6;
			display: block;
			width: 100%;
			text-align: right;
		}

		.back-con {
			display: flex;
			align-items: center;

			.red {
				color: #FF0000;
			}
		}
	}

	.feed-btn {
		width: 90%;
		border-radius: 16upx;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #3662EC;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10upx;
		position: fixed;
		bottom: 40upx;
		left: 5%;

		image {
			width: 48upx;
			height: auto;
			display: block;
			margin-right: 10upx;
		}

		text {
			font-size: 40upx;
			color: #3662EC;
			font-weight: bold;
		}
	}
}
</style>